/**
 * @huanhuan
 * 转让详情
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    FlatList
} from 'react-native'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import AlertManager from '../../components/common/AlertManager'
import { toastShort, consoleLog } from '../../utils/utilsToast'
import ActivityIndicatorItem from '../../components/common/ActivityIndicatorItem'

import FooterComponent from '../../components/common/footerComponent'
import EmptyComponent from '../../components/common/emptyComponent'
export default class AssignmentDetatil extends Component {

    constructor(props) {
        super(props);
        const { params } = this.props.navigation.state;
        this.state =  {
            id: params.item.id, // 当前详情的id
            is_many: params.item.is_many,
            dataSource: [],
            ready: false,

            money: '',
            price: '',
            money_text: '',
            all_money: '',
            all_money_text: '',
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount() {
        this.getDataSource();
    }

    getDataSource = () => { // 请求转让详情
        let {id} = this.state;
        let url = ServicesApi.transfer_detail;
        let data = {
            id,
        };
        Services.post(url, data, true)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    console.log('转让详情result------------->', result)
                    this.setState({
                        dataSource: result.data.data,
                        money: result.data.data.money,
                        price: result.data.data.price,
                        ready: true,
                    }, () => this.changeMoney())
                }else{
                    toastShort(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    onBack = () => {
        this.props.navigation.state.params.onCallBack();
        this.props.navigation.goBack();
    }

    onPushNavigator = (compent, data) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            id: data,
            onCallBack:()=>{
                console.log('1');
            }
        })
    }

    changeMoney = () => { // 修改受让份额
        let { id, money, price } = this.state;
        let url = ServicesApi.fund_get_money_text;
        let data = {
            money: money,
        }
        Services.post(url, data)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    // toastShort(result.msg);
                    this.setState({
                        all_money: money * price, // 给总价计算出来
                        money_text: result.data.money_text,
                    },() => this._changeMoney())
                } else {
                    toastShort(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    _changeMoney = () => { // 受让总价
        let { all_money } = this.state;
        let url = ServicesApi.fund_get_money_text;
        let data = {
            money: all_money,
        }
        Services.post(url, data)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    this.setState({all_money_text: result.data.money_text})
                }else{
                    toastShort(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    render(){
        let {dataSource, money, money_text, all_money, all_money_text, is_many} = this.state;
        return (
            <View style={styles.container}>

                <NavigationBar
                    title = {'转让详情'}
                    style = {styles.navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                />

                <View style={{flex: 1}}>
                    <ScrollView>
                        <View style={styles.header}>
                            <Text style={styles.headerText}>委托号： {dataSource.order_sn}</Text>
                            <Text style={styles.headerTypeText}>转让中</Text>
                        </View>
                        <View style={styles.body}>
                            <View style={styles.bodyTitleBox}>
                                <Text style={styles.bodyTitle}>{dataSource.fund_order_info && dataSource.fund_order_info.fund_id_name}</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>业绩比较基准</Text>
                                <Text style={styles.bodyRight}>{dataSource.datum_rate}%</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>产品期限</Text>
                                <Text style={styles.bodyRight}>{dataSource.fund_order_info && dataSource.fund_order_info.time_limit}</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>委托时间</Text>
                                <Text style={styles.bodyRight}>{dataSource.create_time}</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>转让份额</Text>
                                <Text style={styles.bodyRight}>{dataSource.money}</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>转让单价</Text>
                                <Text style={styles.bodyRight}>{dataSource.price}元</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>附带受益（截至今日）</Text>
                                <Text style={styles.bodyRight}>{dataSource.fund_order_info && dataSource.fund_order_info.income_amount}元</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>转让总价</Text>
                                <Text style={styles.bodyRight}>{dataSource.amount}元</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>是否支持部分转让</Text>
                                <Text style={styles.bodyRight}>{dataSource.is_many_name}</Text>
                            </View>
                        </View>
                        <View style={styles.footer}>
                            <View style={styles.footerLine}>
                                <Text style={styles.bodyLeft}>申请受让份额</Text>
                                <View style={styles.textInputBox}>
                                    <TextInput
                                        defaultValue={money}
                                        placeholder={'受让份额'}
                                        style={styles.textInput}
                                        onChangeText={(text) => this.setState({ 
                                            money: text,
                                        }, () => this.changeMoney())}
                                        editable={is_many == 1 ? true : false}
                                        underlineColorAndroid={'transparent'}
                                    /> 
                                </View>
                            </View>
                            <View style={styles.footerLine}>
                                <Text style={styles.bodyLeft}>申请受让份额（大写）</Text>
                                <Text style={styles.bodyRight}>{money_text}</Text>
                            </View>
                            <View style={styles.footerLine}>
                                <Text style={styles.bodyLeft}>受让份额</Text>
                                <Text style={styles.bodyRight}>{money}</Text>
                            </View>
                            <View style={styles.footerLine}>
                                <Text style={styles.bodyLeft}>受让份额对应收益</Text>
                                <Text style={styles.bodyRight}>{dataSource.fund_order_info && dataSource.fund_order_info.income_amount}元</Text>
                            </View>
                            <View style={styles.footerLine}>
                                <Text style={styles.bodyLeft}>受让单价</Text>
                                <Text style={styles.bodyRight}>{dataSource.price}元</Text>
                            </View>
                            <View style={styles.footerLine}>
                                <Text style={styles.bodyLeft}>受让总价</Text>
                                <Text style={styles.bodyRight}>{all_money}</Text>
                            </View>
                            <View style={styles.footerLine}>
                                <Text style={styles.bodyLeft}>受让总价</Text>
                                <Text style={styles.bodyRight}>{all_money_text}</Text>
                            </View>
                        </View>
                        <View style={styles.btnBox}>
                            <TouchableOpacity style={styles.btn} onPress={() => this.onPressSubmit()}>
                                <Text style={styles.btnText}>申请受让</Text>
                            </TouchableOpacity>
                        </View>
                    </ScrollView>
                </View>

            </View>
        );
    }

    onPressSubmit = () => {
        const params = {
            title: '温馨提示',
            detail: '您确定申请该份额受让吗？',
            actions: [
                { title: '取消', titleStyle: {  }, actionStyle: {  }, onPress: () => {  } },
                { title: '同意', onPress: () => this.onSubmit() }
            ]
        }
        AlertManager.show(params)
    }

    onSubmit = () => {
        let {money, id, price, dataSource} = this.state;
        let url = ServicesApi.transfer_save_assignee;
        let data = {
            id: id,
            money: money,
            price: price,
            datum_rate: dataSource.datum_rate,
        }
        Services.post(url, data)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    toastShort(result.msg);
                    this.onPushNavigator('Contract', result.data.id); // 成功跳转合同页面
                }else{
                    toastShort(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    
}

const styles = StyleSheet.create({
    // 整体
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
    navigationBar: {
        backgroundColor: '#fff',
        borderBottomColor: GlobalStyles.bgColor,
        borderBottomWidth: 1,
    },

    header: {
        height: 60,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 15,
        borderBottomColor: '#f2f2f2',
        borderBottomWidth: 1,
        backgroundColor: '#fff',
    },
    headerText: {
        color: '#333',
        fontSize: 12,
    },
    headerTypeText: {
        color: '#B48148',
        fontSize: 12,
        paddingVertical: 3,
        paddingHorizontal: 8,
        borderRadius: 5,
        backgroundColor: '#f0e6da',
    },
    body: {
        marginBottom: 10,
        backgroundColor: '#fff',
    },
    bodyTitleBox: {
        height: 50,
        paddingHorizontal: 15,
        justifyContent: 'center',
    },
    bodyTitle: {
        fontSize: 14,
        color: '#333',
    },
    bodyLine: {
        height: 50,
        paddingHorizontal: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    bodyLeft: {
        fontSize: 12,
        color: '#666',
    },
    bodyRight: {
        fontSize: 12,
        color: '#333',
        flex: 1,
    },
    footer: {
        backgroundColor: '#fff',
    },
    footerLine: {
        height: 50,
        marginHorizontal: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#f2f2f2',
    },
    bodyLeft: {
        fontSize: 12,
        color: '#666',
    },
    bodyRight: {
        fontSize: 12,
        color: '#333',
    },
    textInputBox: {
        width: GlobalStyles.width - 180,
        height: 30,
        justifyContent: 'center',
        paddingHorizontal: 10,
        paddingVertical: 0,
        borderWidth: 1,
        borderColor: '#f2f2f2',
        borderRadius: 5,
    },
    textInput: {
        paddingVertical: 0,
        color: '#333',
        fontSize: 12,
    },

    btnBox: {
        paddingHorizontal: 15,
        paddingVertical: 10,
        backgroundColor: '#fff',
    },
    btn: {
        height: 30,
        width: GlobalStyles.width - 30,
        borderRadius: 5,
        backgroundColor: '#B88950',
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnText: {
        fontSize: 14,
        color: '#fff',
    },
});




            







